<!--
 * @Description: 首页
 * @Autor: 赖维健(lwj1994)
 * @Date: 2021-09-28 10:01:01
 * @LastEditors: 赖维健(lwj1994)
 * @LastEditTime: 2021-11-16 20:57:15
-->
<template>
  <div class="home"
       :style="{ background: currentStyle.bgColor }">
    <div class="blur"
         :style="{ backgroundImage: currentStyle.bgImage }">
      <div class="blur-mask"></div>
    </div>

    <div class="content">
      <div class="btn-mod-wrap">
        <div class="btn-mod"
             @click="goCollect">收藏</div>
        <div class="btn-mod"
             @click="goSetting">添加到</div>
        <div class="btn-mod">下载</div>
        <div class="btn-mod">删除</div>
        <div class="btn-mod">清空列表</div>
      </div>

      <div class="music-body">
        <div class="music-avatar">
          <img :src="music.avatar"
               alt=""
               width="300"
               height="300">
        </div>
        <div class="music-lyric">
          <div class="music-name">{{ music.name }}</div>
          <div class="music-singer">{{ music.singer }}</div>

          <p v-for="(item, index) in music.lyric"
             :key="index">{{ item }}</p>
        </div>
      </div>
      <div class="music-player">
        <div class="left">
          <van-icon name="arrow-left"
                    size="40"
                    @click="prev" />
        </div>

        <div class="play">
          <van-icon :name="playing ? 'pause' : 'play'"
                    size="40"
                    @click="playing = !playing" />
        </div>

        <div class="right">
          <van-icon name="arrow"
                    size="40"
                    @click="next" />
        </div>

        <div class="progress">
          <div class="progress-inner"
               :style="{ background: currentStyle.activeColor }"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'home',

  setup() {
    const router = useRouter()

    const state = reactive({
      musicList: [  // 歌曲列表
        {
          name: '江南',
          singer: '林俊杰',
          avatar: '/src/assets/avatar/T002R300x300M000000y5gq7449K9I_1.jpg',
          lyric: [
            '风到这里就是黏',
            '黏住过客的思念',
            '雨到了这里缠成线',
            '缠着我们留恋人世间',
            '你在身边就是缘',
            '缘分写在三生石上面',
            '爱有万分之一甜',
            '宁愿我就葬在这一点',
            '圈圈圆圆圈圈',
            '天天年年天天的我',
            '深深看你的脸'
          ]
        },
        {
          name: '清明雨上',
          singer: '许嵩',
          avatar: '/src/assets/avatar/T002R300x300M000002KSDg90IaScI.jpg',
          lyric: [
            '窗透初晓 日照西桥 云自摇',
            '想你当年荷风微摆的衣角',
            '木雕流金 岁月涟漪 七年前封笔',
            '因为我今生挥毫只为你',
            '雨打湿了眼眶 年年倚井盼归堂',
            '最怕不觉泪已拆两行',
            '我在人间彷徨 寻不到你的天堂',
            '东瓶西镜放 恨不能遗忘',
            '又是清明雨上 折菊寄到你身旁',
            '把你最爱的歌来轻轻唱',
            '远方有琴 愀然空灵 声声催天雨',
          ]
        }
      ],
      active: 0,  // 当期激活的歌曲索引
      playing: false, // 播放状态
      currentStyle: {}, // 当前激活的歌曲样式
    })

    // 当前激活的歌曲
    const music = computed(() => {
      return state.musicList[state.active]
    })

    // 设置主题
    const setTheme = () => {
      const img = new Image()
      img.src = music.value.avatar
      img.crossOrigin = 'anonymous'
      img.onload = () => {
        themeColor(img, (arr) => {
          state.currentStyle = {
            bgColor: `rgb(${arr[0][0]}, ${arr[0][1]}, ${arr[0][2]})`,
            bgImage: `url(${music.value.avatar})`,
            activeColor: `rgb(${arr[7][0]}, ${arr[7][1]}, ${arr[7][2]})`
          }
        })
      }
    }

    // 上一曲
    const prev = () => {
      if (!state.active) return

      state.active--
      setTheme()
    }

    // 下一曲
    const next = () => {
      if (state.active >= state.musicList.length - 1) return

      state.active++
      setTheme()
    }

    // 跳转收藏
    const goCollect = () => {
      router.push({ name: 'collect' })
    }

    // 跳转设置
    const goSetting = () => {
      router.push({ name: 'setting' })
    }

    setTheme()

    return {
      ...toRefs(state),
      music,
      prev,
      next,
      goCollect,
      goSetting
    }
  }
})
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  position: relative;
}

.blur {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  opacity: 0.6;
  filter: blur(65px);
  transform: translateZ(0);

  .blur-mask {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.35);
  }
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 60px;
  position: relative;
  z-index: 3;

  .header-nav-item {
    font-size: 90px;
    font-weight: 400;
    position: relative;

    &.active {
      font-size: 120px;
      font-weight: 500;
      &::after {
        display: block;
      }
    }

    &::after {
      display: none;
      content: '';
      position: absolute;
      bottom: -30px;
      width: 100px;
      height: 20px;
      left: 50%;
      border-radius: 10px;
      transform: translateX(-50%);
      background: #000;
    }

    .van-icon {
      font-weight: 500;
      font-size: 100px;
    }
  }
}

.content {
  padding: 100px;
  position: relative;
  z-index: 3;
}

.btn-mod-wrap {
  display: flex;
  .btn-mod {
    width: 120px;
    height: 38px;
    text-align: center;
    opacity: 0.8;
    color: #fff;
    border: 1px solid;
    border-color: rgba(255, 255, 255, 0.2);
    line-height: 38px;
    font-size: 14px;
    cursor: pointer;
    & + .btn-mod {
      margin-left: 6px;
    }
    &:hover {
      color: #fff;
      opacity: 1;
      border-color: rgba(255, 255, 255, 1);
    }
  }
}

.music-body {
  height: 600px;
  display: flex;
  align-items: center;

  .music-avatar {
    width: 400px;
    text-align: center;
  }

  .music-lyric {
    margin-left: 100px;
    .music-name {
      font-size: 28px;
      color: #fff;
      margin-bottom: 20px;
    }
    .music-singer {
      font-size: 16px;
      color: #fff;
      margin-bottom: 10px;
    }
    p {
      line-height: 2em;
      font-size: 18px;
      color: #fff;
      opacity: 0.8;
    }
  }
}

.music-player {
  height: 100px;
  display: flex;
  align-items: center;
  .van-icon {
    margin: 0 20px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    &:hover {
      color: #fff;
    }
  }
}

.progress {
  width: 600px;
  height: 6px;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  .progress-inner {
    width: 300px;
    height: 6px;
    border-radius: 6px;
    margin-left: -2px;
  }
}
</style>